<template>
    <a-modal title="发送货" :after-close="reset" @ok="submit">
        <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '80px' } }">
            <a-form-item label="选择类型：" name="storeId">
                <a-select v-model:value="form.type" placeholder="请选择" style="width: 50%" clearable
                    @change="changeRadioType(formItem.type)">
                    <a-select-option value="1">发货</a-select-option>
                    <a-select-option value="2">送货</a-select-option>
                    <a-select-option value="3">虚拟</a-select-option>
                </a-select>
            </a-form-item>
            <div v-if="form.type === '1'">
                <a-form-item label="发货类型：" name="expressId">
                    <a-radio-group v-model:value="form.expressRecordType" @change="changeRadio(form.expressRecordType)">
                        <a-radio value="1"> 手动填写 </a-radio>
                        <a-radio value="2"> 电子面单打印 </a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="快递公司：" name="expressCode">
                    <a-select v-model:value="form.expressCode" placeholder="请选择" style="width: 50%" clearable
                        @change="onChangeExport(form.expressCode)">
                        <a-select-option v-for="(item, i) in express" :key="i" :value="item.code">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item v-if="form.expressRecordType === '1'" label="快递单号：" name="expressNumber">
                    <a-input v-model:value="form.expressNumber" placeholder="请输入快递单号" />
                </a-form-item>
                <template v-if="form.expressRecordType === '2'">
                    <a-form-item label="电子面单：" class="express_temp_id" prop="expressTempId">
                        <div class="acea-row">
                            <a-select v-model="form.expressTempId" placeholder="请选择电子面单"
                                :class="[form.expressTempId ? 'width9' : 'width8']" @change="onChangeImg">
                                <a-select-option v-for="(item, i) in exportTempList" :key="i" :value="item.temp_id"
                                    :label="item.title" />
                            </a-select>
                            <div v-if="form.expressTempId" style="position: relative;">
                                <!--<span class="tempImg" @click="">预览</span>-->
                                <div class="tempImgList ml10">
                                    <div class="demo-image__preview">
                                        <a-image style="width: 36px; height: 36px" :src="tempImg"
                                            :preview-src-list="[tempImg]" />
                                    </div>
                                </div>
                            </div>
                            <!--<Button v-if="form.expressTempId" type="text" @click="preview">预览</Button>-->
                        </div>
                    </a-form-item>
                    <a-form-item label="寄件人姓名：" prop="toName">
                        <a-input v-model="form.toName" placeholder="请输入寄件人姓名" style="width:80%;" />
                    </a-form-item>
                    <a-form-item label="寄件人电话：" prop="toTel">
                        <a-input v-model="form.toTel" placeholder="请输入寄件人电话" style="width:80%;" />
                    </a-form-item>
                    <a-form-item label="寄件人地址：" prop="toAddr">
                        <a-input v-model="form.toAddr" placeholder="请输入寄件人地址" style="width:80%;" />
                    </a-form-item>
                </template>
            </div>

            <div v-if="form.type === '2'">
                <a-form-item label="送货人姓名：" prop="deliveryName">
                    <a-input v-model="form.deliveryName" placeholder="请输入送货人姓名" style="width:80%;" />
                </a-form-item>
                <a-form-item label="送货人电话：" prop="deliveryTel">
                    <a-input v-model="form.deliveryTel" placeholder="请输入送货人电话" style="width:80%;" />
                </a-form-item>
            </div>
            <div>
                <a-form-item label="">
                    <div style="color:#CECECE;">顺丰请输入单号：收件人或寄件人手机号后四位</div>
                    <div style="color:#CECECE;">例如：SF000000000000:3941</div>
                </a-form-item>
            </div>
        </a-form>
    </a-modal>
</template>

<script setup lang="ts">
import { orderSendApi, exportTempApi, expressAllApi } from './api';
import { ISendOrder, type IISendOrder, Temp } from './entity';
import { validReg } from '@/utils/validate';

const props = withDefaults(defineProps<{
    orderId: string
}>(), {
})
const { formRef, submit, close } = useDialog({ validCallback: save })

let form = $ref(new ISendOrder())

const rules = {
    storeorderName: [validReg('required', '请输入用户名')]
}

onMounted(() => {
})
const emit = defineEmits(['change'])

// 快递公司选择
function onChangeExport(val: string) {
    form.expressTempId = '';
    if (form.expressRecordType === '2') exportTemp(val);
}
// 电子面单模板
let exportTempList = $ref<Temp[]>([])
function exportTemp(val: string) {
    exportTempApi({ com: val }).then(async res => {
        exportTempList = res.data.data || [];
    })
}
let tempImg = $ref<string>('')
function onChangeImg(item: string) {
    exportTempList.map(i => {
        if (i.temp_id === item) tempImg = i.pic
    })
}
function changeRadioType() {
    form.expressId = ''
    form.expressCode = ''
}
let expressType = $ref<string>('')
function changeRadio(o: number) {
    if (o == 2) {
        expressType = 'elec'
    } else {
        expressType = 'normal'
    }
    form.expressId = ''
    form.expressCode = ''
    getList();
}
let express = $ref('')
// 物流公司列表
async function getList() {
    let res = await expressAllApi({ type: expressType })
    express = res
}
function save() {
    form.orderNo = props.orderId;
    orderSendApi(form).then(() => {
        AntMessage.success('保存成功')
        close()
        emit('change')
    })
}
function reset() {
    form = new ISendOrder()
}
</script>

<style lang="less"></style>